<template>
    <div>
        <h1>3. 配合拆分后的辅助函数写法</h1>
        <p>{{num}}</p>
        <p>{{title}}</p>
        <p>{{dbNum}}</p>
        <hr>
        <button @click="addNum(10)">按钮</button>
        <button @click="asyncAddNum(20)">异步按钮</button>
    </div>
</template>

<script>
import {mapState,mapGetters, mapMutations,mapActions} from 'vuex'
export default {
    name:'',
    props: {

    },
    data() {
        return {

        };
    },
    computed: {
        // 拆分之后，辅助函数入参就要写成对象
        // 这里主要是记住格式，他就这么用

        // 传函数进去给mapState
        // 里面去调用，得到num的值，作为但会给我们的函数的返回值
        ...mapState({
            num: state => state.changeNum.num,
            title: state => state.changeNum.title
        }),
        ...mapGetters({
            dbNum: 'changeNum/dbNum'
        })
    },
    methods: {
        ...mapMutations({
            addNum: 'changeNum/addNum'
        }),
        ...mapActions({
            asyncAddNum: 'changeNum/asyncAddNum'
        })
        
    },
    
};
</script>

<style scoped lang="less">

</style>
